<% layout('/layout/default.html', {title: '流程表单信息详情', libs: ['validate','zTree','icheck']}){ %>
<div class="main-content">
	<div class="card-header">
		<i class="fas fa-pencil-alt"></i> 流程发起人员关联设置
	</div>
	<form id="inputForm" action="${ctx}/act/flowForm/saveUserPermission" method="post" class="form-horizontal">
		<input type="hidden" name="id" value="${flowForm.id}"/>
		<div class="card-body">
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="">流程模型key：</label>
						<div class="col-sm-6">
							<input name="modelKey"  class="form-control form-control-sm" value="${flowForm.modelKey}" readonly="readonly"/>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="">流程模型版本：</label>
						<div class="col-sm-6">
							<input name="modelVersion"  maxlength="11" class="form-control form-control-sm" value="${flowForm.modelVersion}" readonly="readonly"/>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="">
							模型名称：
						</label>
						<div class="col-sm-6">
							<input name="modelName"  maxlength="400" class="form-control form-control-sm" value="${flowForm.modelName}" readonly="readonly"/>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="人员授权"> 人员授权:</label>
						<div class="col-sm-6">
							<div id="ztree" class="ztree" style="margin-top:3px;float:left;"></div>
							<input id="userIds" type="hidden" name="userIds"/>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="box-footer">
			<div class="row">
				<div class="offset-md-2 col-md-10">
					<% if (hasPermi('flowable:flowForm:edit')){ %>
						<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> 保 存</button>
					<% } %>
					<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="window.parent.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> 关 闭</button>
				</div>
			</div>
		</div>
	</form>
</div>
<% } %>

<script type="text/javascript">
	$("#inputForm").validate({
		submitHandler: function(form){

            var ids = [], nodes = tree.getCheckedNodes(true);
            for(var i=0; i<nodes.length; i++) {
                if (js.startWith(nodes[i].id, 'u_')) {
                    ids.push(nodes[i].id);
                }
            }
            $("#userIds").val(ids.join(",").replace(/u_/ig,""));

			js.ajaxSubmitForm($(form), function(data){
				js.showMessage(data.message);
				if(data.result == 'true'){
					window.parent.closeCurrentTabPage(window.parent.refreshTab);
				}
			});
	    }
	});

    var tree, setting = {view:{selectedMulti:false,dblClickExpand:false},check:{enable:true,nocheckInherit:true},
        async:{enable:true,url:"${ctx}/sys/user/treeData",autoParam:["id=officeId"]},
        data:{simpleData:{enable:true}},callback:{

            onClick:function(event, treeId, treeNode){
                tree.expandNode(treeNode);
            },onCheck: function(e, treeId, treeNode){
                var nodes = tree.getCheckedNodes(true);
                for (var i=0, l=nodes.length; i<l; i++) {
                    tree.expandNode(nodes[i], true, false, false);
                }
                return false;
            },onAsyncSuccess: function(event, treeId, treeNode, msg){
                selectCheckNode();
            },onDblClick: function(){
            }
        }
    };
    function expandNodes(nodes) {
        if (!nodes) return;
        for (var i=0, l=nodes.length; i<l; i++) {
            tree.expandNode(nodes[i], true, false, false);
            if (nodes[i].isParent && nodes[i].zAsync) {
                expandNodes(nodes[i].children);
            }
        }
    };

	$(document).ready(function() {

	    js.ajaxRequest("${ctx}/sys/office/treeData?type=3", null, function(zNodes){
            // 初始化树结构
            tree = $.fn.zTree.init($("#ztree"), setting, zNodes);

            // 默认展开一级节点
            var nodes = tree.getNodesByParam("level", 0);
            for(var i=0; i<nodes.length; i++) {
                tree.expandNode(nodes[i], true, false, false);
            }
            //异步加载子节点（加载用户）
            var nodesOne = tree.getNodesByParam("isParent", true);
            for(var j=0; j<nodesOne.length; j++) {
                tree.reAsyncChildNodes(nodesOne[j],"!refresh",true);
            }
            // selectCheckNode();
        });
    });
    function selectCheckNode(){
        var ids = "${selectIds}".split(",");
        js.print(ids);
        for(var i=0; i<ids.length; i++) {
            var node = tree.getNodeByParam("id", "u_"+ids[i]);
            try{
                tree.checkNode(node, true, true);
            }catch(e){
                js.print(e);
            }
        }
    }
</script>